<template>
  <div class="champion-info">
    <Header :style="{width: '100%', background: '#f5f7f9', padding: '0'}">
        <Breadcrumb :style="{margin: '16px 0'}">
            <BreadcrumbItem><a href="http://localhost:8080/champion">英雄列表</a></BreadcrumbItem>
            <BreadcrumbItem>{{championData.name}} {{championData.title}}</BreadcrumbItem> 
        </Breadcrumb>
    </Header>
    <div>
      <div class="layout" :style="{width: '103%'}">
        
        <Layout>
            
            <div class="skinSlide">
                <div class="sidemenuback">
                  
                </div>
                <div class="sidemenu">
                    <h1>{{championData.name}}</h1>
                    <h2>{{championData.title}}</h2>
                    <div class="jobTag">
                      <span v-for="(job,index) in jobTag" :key="index">{{job}}</span>
                    </div>
                    <dl>
                      <dt>物理攻击</dt>
                      <dd><i class="bar1" :style="attack"></i></dd>
                      <dt>魔法攻击</dt>
                      <dd><i class="bar2" :style="magic"></i></dd>
                      <dt>防御能力</dt>
                      <dd><i class="bar3" :style="defense"></i></dd>
                      <dt>上手难度</dt>
                      <dd><i class="bar4" :style="difficulty"></i></dd>
                    </dl>
                  </div>
                
                <div class="skinImgs" :style="{left: skinImgPos}">
                  <div v-for="skin in championData.skins" :key="skin.index">
                    <img  ref="skinImg" class="skinImg" :src="skin.sourceImg"/>
                  </div>
                </div>
                <div class="skinNavi">
                  <div class="skinName"><span>{{skinName}}</span></div>
                  <div class="skinIcons">
                    <div v-for="(skin,index) in championData.skins" :class="isActive == index ? 'iconActive':''" :key="skin.index" @click="checkedItem(index)">
                      <img  ref="skinIcon" class="skinIcon" :src="skin.iconImg"/>
                      <span class="iconBorder"></span>
                    </div>
                  </div>
                </div>

            </div>
        </Layout>
        
        <h1 class="blockTitle">背景故事</h1>
        <Layout>
            <Content :style="{margin: '0', background: '#fff', minHeight: '160px'}">
                <p :style="{margin: '28px 32px', fontSize: '20px'}">{{championData.blurb}}</p>
            </Content>
        </Layout>
        <h1 class="blockTitle">技能介绍</h1>
        <ul class="skillIcon">
          <li @click="spellKeyToP" ref="P" class="active"><img :src="championData.passive.image"/></li>
          <li @click="spellKeyToQ" ref="Q"><img :src="spells[0].iconImg"/></li>
          <li @click="spellKeyToW" ref="W"><img :src="spells[1].iconImg"/></li>
          <li @click="spellKeyToE" ref="E"><img :src="spells[2].iconImg"/></li>
          <li @click="spellKeyToR" ref="R"><img :src="spells[3].iconImg"/></li>
        </ul>
        
        <Layout>
            <Content :style="{margin: '0', background: '#fff', minHeight: '145px', paddingTop: '20px'}">
              <div v-show="spellKey==='P'">
                <span class="skillName">{{championData.passive.name}}</span>
                <span class="skillKey">被动技能</span>
                <p class="tips">{{championData.passive.description}}</p>
              </div>
              <div v-show="spellKey==='Q'">
                <span class="skillName">{{spells[0].name}}</span>
                <span class="skillKey">快捷键：Q</span>
                <p class="tips">{{spells[0].description}}</p>
              </div>
              <div v-show="spellKey==='W'">
                <span class="skillName">{{spells[1].name}}</span>
                <span class="skillKey">快捷键：W</span>
                <p class="tips">{{spells[1].description}}</p>
              </div>
              <div v-show="spellKey==='E'">
                <span class="skillName">{{spells[2].name}}</span>
                <span class="skillKey">快捷键：E</span>
                <p class="tips">{{spells[2].description}}</p>
              </div>
              <div v-show="spellKey==='R'">
                <span class="skillName">{{spells[3].name}}</span>
                <span class="skillKey">快捷键：R</span>
                <p class="tips">{{spells[3].description}}</p>
              </div>
            </Content>
        </Layout>
        <h1 class="blockTitle">使用技巧</h1>
        <Layout>
            <Content :style="{margin: '0', background: '#fff', minHeight: '280px'}">
                <div class="tips">
                  <h3>当你使用{{championData.name}}</h3>
                  <ul>
                    <li v-for="(allyTips, index) in championData.allyTips" :key="index">
                        {{championData.allyTips[index]}}
                    </li>
                  </ul>
                </div>
                <Divider />
                <div class="tips">
                  <h3>敌人使用{{championData.name}}</h3>
                  <ul>
                    <li v-for="(enemyTips, index) in championData.enemyTips" :key="index">
                        {{championData.enemyTips[index]}}
                    </li>
                  </ul>
                </div>
            </Content>
        </Layout>
    </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: "champion-info",
  data(){
    return{
      championData:null,
      spells:null,
      spellKey:"P",
      isActive: 0,
      skinImgPos: "0px",
      skinName:"",
      jobTag: [],
      attack: "",
      magic: "",
      defense: "",
      difficulty: ""
    }
  },
  methods: {
    checkedItem(index){
      this.isActive=index;
      this.skinImgPos=(-index*1240) + "px";
      if(index===0){
        this.skinName=this.championData.skins[0].championName;
      } else {
        this.skinName=this.championData.skins[index].name;
      }
    },
    spellKeyToP() {
      this.spellKey = "P";
      this.$refs.P.setAttribute("class","active");
      this.$refs.Q.setAttribute("class","");
      this.$refs.W.setAttribute("class","");
      this.$refs.E.setAttribute("class","");
      this.$refs.R.setAttribute("class","");
    },
    spellKeyToQ() {
      this.spellKey = "Q";
      this.$refs.P.setAttribute("class","");
      this.$refs.Q.setAttribute("class","active");
      this.$refs.W.setAttribute("class","");
      this.$refs.E.setAttribute("class","");
      this.$refs.R.setAttribute("class","");
    },
    spellKeyToW() {
      this.spellKey = "W";
      this.$refs.P.setAttribute("class","");
      this.$refs.Q.setAttribute("class","");
      this.$refs.W.setAttribute("class","active");
      this.$refs.E.setAttribute("class","");
      this.$refs.R.setAttribute("class","");
    },
    spellKeyToE() {
      this.spellKey = "E";
      this.$refs.P.setAttribute("class","");
      this.$refs.Q.setAttribute("class","");
      this.$refs.W.setAttribute("class","");
      this.$refs.E.setAttribute("class","active");
      this.$refs.R.setAttribute("class","");
    },
    spellKeyToR() {
      this.spellKey = "R";
      this.$refs.P.setAttribute("class","");
      this.$refs.Q.setAttribute("class","");
      this.$refs.W.setAttribute("class","");
      this.$refs.E.setAttribute("class","");
      this.$refs.R.setAttribute("class","active");
    },
  },
  mounted() {
    axios.get(`http://localhost:8080/champion/sel-id`,{
                params:{
                  id: this.$route.params.id
                }
              })
            .then(res=>{
                this.championData = res.data;
                this.skinName = res.data.skins[0].championName;
                for(var spell in res.data.spells) {
                  if(spell.spellKey==="Q") {
                    this.spells[0] = spell;
                  }
                  if(spell.spellKey==="W") {
                    this.spells[1] = spell;
                  }
                  if(spell.spellKey==="E") {
                    this.spells[2] = spell;
                  }
                  if(spell.spellKey==="R") {
                    this.spells[3] = spell;
                  }
                }
                this.spells = res.data.spells;

                if(res.data.isAssassin==true){
                  this.jobTag.push("刺客");
                }
                if(res.data.isFighter==true){
                  this.jobTag.push("战士");
                }
                if(res.data.isMage==true){
                  this.jobTag.push("法师");
                }
                if(res.data.isMarksman==true){
                  this.jobTag.push("射手");
                }
                if(res.data.isSupport==true){
                  this.jobTag.push("辅助");
                }
                if(res.data.isTank==true){
                  this.jobTag.push("坦克");
                }
                this.attack = "width:"+res.data.attack*10+"%";
                this.magic = "width:"+res.data.magic*10+"%";
                this.defense = "width:"+res.data.defense*10+"%";
                this.difficulty = "width:"+res.data.difficulty*10+"%";
            })
  },
}

</script>

<style lang="less" scoped>
    @darkGreen : #338c7a;

    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        left: -25px;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-logo{
        width: 100px;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
        
    }
    .layout-nav{
        width: 420px;
        margin: 0 auto;
        margin-right: 20px;
    }
    .layout-footer-center{
        text-align: center;
    }
    .skinSlide{
      margin: 0;
      width: 20000px; 
      height: 632px; 
      position: relative;
    }
    .sidemenuback{
      float: left;
      position: absolute;
      background-color: #000;
      opacity: 0.6;
      z-index: 11;
      width: 305px;
      height: 632px;
    }
    .sidemenu{
      position: absolute;
      top: 50px;
      left: 40px;
      width: 290px;
      color: #fff;
      z-index: 12;
    }
    .sidemenu>h1{
      font-size: 24px;
      line-height: 25px;
      padding-bottom: 5px;
      font-weight: 400;
    }
    .sidemenu>h2{
      font-size: 42px;
      padding-bottom: 5px;
    }
    .jobTag{
      width: 210px;
      height: 21px;
    }
    .jobTag>span{
      float: left;
      width: 35px;
      height: 21px;
      line-height: 21px;
      margin-right: 5px;
      text-align: center;
      background: @darkGreen;
      border-radius: 5px;
      font-size: 13px;
    }
    .sidemenu>dl{
      margin-top: 25px;
      height: 90px;
      width: 150px;
      font-size: 13px;
    }
    .sidemenu>dl>dt{
      float: left;
      width: 40%;
      margin-bottom: 5px;
      height: 16px;
      line-height: 16px;
    }
    .sidemenu>dl>dd{
      float: left;
      width: 60%;
      margin: 2px 0 7px;
      height: 12px;
      background: #363c3c;
    }
    .sidemenu>dl>dd>i{
      display: block;
      height: 12px;
    }
    .bar1{
      background: #f2c500;
    }
    .bar2{
      background: #f59d00;
    }
    .bar3{
      background: #2c97de;
    }
    .bar4{
      background: #1eca6b;
    }
    .blockTitle{
      margin-top: 20px;
      margin-bottom: 10px;
      color: @darkGreen;
    }
    h3{
      color: @darkGreen;
    }
    .tips{
      margin: 28px 32px;
      font-size: 14px;
    }
    ul{
      list-style: none;
    }
    .skillIcon{
      display: flex;
    }
    .skillIcon > li{
      cursor: pointer;
    }
    .skillIcon > li >img{
      margin: 20px;
    }
    .skillName{
      font-size: 20px;
      font-weight: bold;
      margin: 33px;
    }
    .skillKey{
      font-size: 15px;
      color: #aaa;
    }
    .active{
      background-color: white;
      border-top: 4px @darkGreen solid;
      box-sizing: content-box;
    }
    .skinIcons{
      float: left;
      position: absolute;
      display: flex;
      right: 18775px;
      bottom: 0px;
      cursor: pointer;
    }
    .skinIcons > div{
      width: 60px;
      height: 60px;
    }
  
    .skinIcons > div > img{
      opacity: 0.7;
      width: 60px;
      height: 60px;
    }

    .skinIcons > div > img:hover{
      opacity: 1;
    }
    .skinImgs{
      float: left;
      position: absolute;
      display: flex;
      transition: 0.5s;
      transition-timing-function: cubic-bezier(0.87, 0.01, 0.17, 1.01);
    }
    .skinImgs > div > img{
      width: 1240px;
      height: 632px;
      z-index: 10;
    }
    .iconActive{
      position: relative;
    }
    .iconActive > img{
      opacity: 1 !important;
    }
    .iconActive > span{
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 52px;
      height: 52px;
      border: 4px solid @darkGreen;
      box-sizing: content-box;
    }
    .iconBorder{
      display: none;
    }
    .skinName{
      float: left;
      position: absolute;
      right: 18775px;
      bottom: 70px;
    }
    .skinName > span{
      padding: 0 5px;
      background-color: #000;
      font-size: 20px;
      line-height: 25px;
      color: #fff;
      z-index: 11;
    }
</style>
